---
# title: "Overflow"
title: "溢出"
# description: "Utilities for controlling how an element handles content that is too large for the container."
description: "用于控制元素如何处理超出容器的内容的功能类。"
features:
  responsive: true
  customizable: false
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/overflow'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

<!-- ## Visible -->
## 可见

<!-- Use `overflow-visible` to prevent content within an element from being clipped. Note that any content that overflows the bounds of the element will then be visible. -->
使用 `overflow-visible` 来防止元素内的内容被剪切。请注意，任何溢出元素边界的内容都将是可见的。

```html lightBlue
<template preview>
  <div class="h-32 overflow-hidden">
    <div class="overflow-visible h-24 px-6 py-2 rounded-md bg-light-blue-200">
      <p class="md:w-2/3 lg:w-1/2 font-flow leading-5 text-light-blue-700">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget
      </p>
    </div>
  </div>
</template>

<div class="**overflow-visible** h-24 h- ...">Lorem ipsum dolor sit amet...</div>
```

<!-- ## Auto -->
## 自动

<!-- Use `overflow-auto` to add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike `.overflow-scroll`, which always shows scrollbars, this utility will only show them if scrolling is necessary. -->
使用 `overflow-auto` 在一个元素的内容溢出该元素的边界时为其添加滚动条。不像 `.overflow-scroll` 总是显示滚动条，这个功能类只在需要滚动时才会显示。

```html rose
<template preview>
  <div class="overflow-auto h-32 rounded-md bg-rose-200">
    <p class="font-flow leading-5 text-rose-700 px-6 py-4">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
    </p>
  </div>
</template>

<div class="**overflow-auto** h-32 ...">Lorem ipsum dolor sit amet...</div>
```

<!-- ## Hidden -->
## 隐藏

<!-- Use `overflow-hidden` to clip any content within an element that overflows the bounds of that element. -->
使用 `overflow-hidden` 来剪切元素中任何溢出该元素边界的内容。

```html purple
<template preview>
  <div class="overflow-hidden h-32 rounded-md bg-purple-200">
    <p class="font-flow leading-5 text-purple-700 px-6 py-4">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
    </p>
  </div>
</template>

<div class="**overflow-hidden** h-32 ...">Lorem ipsum dolor sit amet...</div>
```

<!-- ## Scroll horizontally if needed -->
## 需要时水平滚动

<!-- Use `overflow-x-auto` to allow horizontal scrolling if needed. -->
如果需要，使用 `overflow-x-auto` 来允许水平滚动。

```html fuchsia
<template preview>
  <div class="overflow-x-auto rounded-md bg-fuchsia-200">
    <p class="inline-block text-fuchsia-500 font-medium px-6 py-4">
      QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
    </p>
  </div>
</template>

<div class="**overflow-x-auto** ...">QrLmmW69vMQD...</div>
```

<!-- ## Scroll vertically if needed -->
## 需要时垂直滚动

<!-- Use `overflow-y-auto` to allow vertical scrolling if needed. -->
如果需要，使用 `overflow-y-auto` 来允许垂直滚动。

```html amber
<template preview>
  <div class="overflow-y-auto h-32 rounded-md bg-amber-200">
    <p class="font-flow leading-5 text-amber-700 px-6 py-4">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
    </p>
  </div>
</template>

<div class="**overflow-y-auto** h-32 ...">Lorem ipsum dolor sit amet...</div>
```

<!-- ## Scroll horizontally always -->
## 始终水平滚动

<!-- Use `overflow-x-scroll` to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system. -->
使用 `overflow-x-scroll` 允许水平滚动，并始终显示滚动条，除非操作系统禁用了始终可见的滚动条。

```html emerald
<template preview>
  <div class="overflow-x-scroll rounded-md bg-emerald-200">
    <p class="font-flow text-emerald-500 px-6 py-4">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
  </div>
</template>

<div class="**overflow-x-scroll** ...">QrLmmW69vMQD...</div>
```

<!-- ## Scroll vertically always -->
## 始终垂直滚动

<!-- Use `overflow-y-scroll` to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system. -->
使用 `overflow-y-scroll` 允许垂直滚动，并始终显示滚动条，除非操作系统禁用了始终可见的滚动条。

```html lightBlue
<template preview>
  <div class="overflow-y-scroll h-32 rounded-md bg-light-blue-200">
    <p class="font-flow leading-5 text-light-blue-700 px-6 py-4">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
  </div>
</template>

<div class="**overflow-y-scroll** h-32 ...">Lorem ipsum dolor sit amet...</div>
```


<!-- ## Scroll in all directions -->
## 在所有方向上滚动

<!-- Use `overflow-scroll` to add scrollbars to an element. Unlike `.overflow-auto`, which only shows scrollbars if they are necessary, this utility always shows them. Note that some operating systems (like macOS) hide unnecessary scrollbars regardless of this setting. -->
使用 `overflow-scroll` 为元素添加滚动条。与 `.overflow-auto` 不同的是，`.overflow-auto` 只在必要时才显示滚动条，而这个功能类总是显示滚动条。需要注意的是，有些操作系统（比如macOS）会隐藏不必要的滚动条，而不考虑这个设置。

```html fuchsia
<template preview>
  <div class="overflow-scroll h-32 rounded-md bg-fuchsia-200">
    <p class="inline-block font-flow leading-5 text-fuchsia-700 px-6 py-4">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
    </p>
  </div>
</template>

<div class="**overflow-scroll** h-32 ...">Lorem ipsum dolor sit amet...</div>
```

## 响应式

<!-- To apply an overflow utility only at a specific breakpoint, add a `{screen}:` prefix to the existing class name. For example, adding the class `md:overflow-scroll` to an element would apply the `overflow-scroll` utility at medium screen sizes and above. -->
要只在特定的断点处应用 overflow 功能，请在现有的类名前添加 `{screen}:` 前缀。例如，将类 `md:overflow-scroll` 添加到一个元素中，就可以在中等大小及以上的屏幕上应用 `overflow-scroll` 功能类。

```html
<div class="overflow-auto **md:overflow-scroll** ...">
  Lorem ipsum dolor sit amet...
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

## 定制

### 变体

<Variants plugin="overflow" />

### 禁用

<Disabling plugin="overflow" />
